<template>
	<view>
		<!-- 头部用户信息 -->
		<u-cell-group :customStyle="{'background':'#ffffff'}">
			<u-cell title="头像">
				<uni-file-picker @progress="progress" @success="success" @fail="fail" @select="select"
					:auto-upload="false" :value="user.avatar" slot="right-icon" limit="1" :del-icon="false"
					disable-preview :imageStyles="imageStyles" file-mediatype="image">选择</uni-file-picker>
			</u-cell>
			<u-cell title="用户名" :value="user.username"><text @tap="inputDialogToggle('username')" class="useTit"
					slot="right-icon">修改</text></u-cell>
			<u-cell title="手机号" :value="user.phonenumber"><text @tap="inputDialogToggle('phonenumber')" class="useTit"
					slot="right-icon">修改</text></u-cell>
			<u-cell title="邮箱" :value="user.email"><text @tap="inputDialogToggle('email')" class="useTit"
					slot="right-icon">修改</text></u-cell>
			<u-cell title="u地址" :value="user.uadder"><text @tap="inputDialogToggle('uadder')" class="useTit"
					slot="right-icon">修改</text></u-cell>
		</u-cell-group>

		<!-- 设置选项 -->
		<u-cell-group :customStyle="{'background':'#ffffff'}">
			<u-cell title="修改密码" isLink @click="changePassword"></u-cell>
			<u-cell title="支付设置" isLink @click="changPayPassword"></u-cell>
			<u-cell title="地址管理" isLink @click="changeadd"></u-cell>
			<u-cell title="通知设置" isLink @click="notificationSettings"></u-cell>
		</u-cell-group>

		<!-- 底部退出登录按钮 -->
		<u-button type="error" @tap="logout" class="logout-cell" text="退出"></u-button>

		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" :title="utitle" :value="uvalue" :placeholder="placeholder"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				editField: "",
				utitle: "修改用户名",
				uvalue: "",
				placeholder: "",
				user: {
					avatar: [{
						url: 'http://img06.jiuxian.com/2024/0111/17a8113edc3c46cf91261b1c29e574135.jpg'
					}],
					username: 'John Doe',
					phonenumber: '',
					paymentPassword: '',
					password: "",
					email: 'john.doe@example.com',
					uid: null,
					uadder: ""
				},
				avatar: "",
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
			};
		},
		mounted() {
			// 在组件挂载时触发获取用户信息的 action
			this.$store.dispatch('getUserInfo');
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo;
			}
		},
		onShow() {
			this.$store.dispatch('getUserInfo');
		},
		watch: {
			// 监听用户信息变化，更新组件中的数据
			userInfo: {
				handler(newValue) {
					console.log(newValue);
					this.user.username = newValue.username;
					this.user.email = newValue.email;
					this.user.phonenumber = newValue.phoneNumber;
					this.user.uid = newValue.uid;
					this.user.uadder = newValue.uadder;
					this.user.avatar[0].url = newValue.avatar;
				},
				immediate: true // 立即触发一次
			}
		},
		methods: {
			// 获取上传状态
			async select(e) {
				const tempFilePaths = e.tempFilePaths;
				this.editField = "avatar";
				const imgUrl = tempFilePaths[0];
				console.log(imgUrl);

				const uploadTask = uni.uploadFile({
					url: 'http://185.232.92.15:3433/system/upload/upload',
					filePath: imgUrl,
					name: 'file',
					success: (uploadRes) => {
						console.log('上传成功', uploadRes);
						const responseData = JSON.parse(uploadRes.data); // 将返回的数据解析为 JSON 对象
						this.avatar = responseData.data.url; // 获取图片的 URL
						this.change();
						// 处理上传成功后的逻辑，比如界面反馈
					},
					fail: (error) => {
						console.error('上传失败', error);
						// 处理上传失败后的逻辑，比如界面反馈
					}
				});

				// 监听上传进度
				uploadTask.onProgressUpdate((res) => {
					console.log('上传进度', res.progress);
					console.log('已经上传的数据长度', res.totalBytesSent);
					console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
					// 更新界面进度条等反馈信息
				});
			},
			progress(e) {
				// 没有上传空间，不会执行 
				console.log("上传进度:", e)
			},
			success(e) {
				// 没有上传空间，不会执行 
				console.log('上传成功')
			},
			fail(e) {
				// 没有上传空间，不会执行 
				console.log('上传失败：', e)
			},
			changePassword() {
				// 处理修改密码逻辑
				uni.navigateTo({
					url: "/pages/tabBar/my/setting/password/password"
				})
			},
			changeadd() {
				uni.navigateTo({
					url: "/pages/tabBar/adderss/adderss"
				})
			},
			async change() {
				console.log("dsd");
				const param = {
					uid: this.user.uid
				};
				if (this.editField === "username") {
					param.username = this.user.username;
				} else if (this.editField === "phonenumber") {
					param.phoneNumber = this.user.phonenumber;
				} else if (this.editField === "email") {
					param.email = this.user.email;
				} else if (this.editField === "avatar") {
					param.avatar = this.avatar
				} else {
					param.uadder = this.user.uadder;
				}

				const res = await this.$request.post('/system/user/updateById', param)

				if (res.code === 200) {
					// this.$store.commit('getUserInfo', param);

				} else {

				}
			},
			inputDialogToggle(val) {
				this.$refs.inputDialog.open()
				if (val === "username") {
					this.utitle = "修改用户名";
					this.placeholder = "请输入修改用户名";
					this.uvalue = this.user.username; // 设置uvalue为用户名
				} else if (val === "phonenumber") {
					this.utitle = "修改手机号码";
					this.placeholder = "请输入修改手机号码";
					this.uvalue = this.user.phonenumber; // 设置uvalue为手机号码
				} else if (val === "uadder") {
					this.utitle = "修改u地址";
					this.placeholder = "请输入修改u地址";
					this.uvalue = this.user.uadder; // 设置uvalue为手机号码
				} else {
					this.utitle = "修改邮箱";
					this.placeholder = "请输入修改邮箱";
					this.uvalue = this.user.email; // 设置uvalue为邮箱
				}

				this.editField = val;

			},
			dialogInputConfirm(val) {
				switch (this.editField) {
					case "avatar":
						this.user.avatar = val;
						break;
					case "username":
						this.user.username = val;
						break;
					case "phonenumber":
						console.log(val)
						this.user.phonenumber = val;
						break;
					case "email":
						this.user.email = val;
						break;
					case "uadder":
						this.user.uadder = val;
						break;
					default:
						break;
				}
				this.change(); // 等待更新完成
			},
			notificationSettings() {
				// 处理通知设置逻辑
			},
			changPayPassword() {
				uni.navigateTo({
					url: "/pages/tabBar/my/setting/paysetting/paysetting"
				})
			},
			logout() {
				// 处理退出登录逻辑
				this.$store.dispatch('logout')
				uni.navigateTo({
					url: "/pages/login/index"
				})
			}
		}
	};
</script>

<style scoped>
	/* 根据需要添加样式 */
	.avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}

	.useTit {
		font-size: 0.9rem;
		color: #f45105;
		margin-bottom: 0.1rem;
	}

	.logout-cell {
		margin: 0 auto;
		margin-top: 4rem;
		width: 50%;
	}

	.dialog-box {
		padding: 10px;
	}
</style>